<template>
  <div class="footer">
    <ul>
      <!--  <li>首页</li>
        <li>订单 </li>
        <li>我的</li> -->
      <li
        @click="handleClick(index)"
        v-for="(item, index) in tablist"
        :key="index"
        :class="{
          iconfont: true,
          [item.icon]: true,
          active: currentIndex == index,
        }"
      >
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import "../assets/iconfont/iconfont.css";

export default {
  name: "Tabbar",
  data() {
    return {
      currentIndex: 0, //用来保存点击的下标
      tablist: [
        {
          icon: "icon-shouye",
          text: "首页",
        },
        {
          icon: "icon-weibiaoti-",
          text: "爆爆团",
        },
        {
          icon: "icon-gouwu",
          text: "订单",
        },
        {
          icon: "icon-wode",
          text: "我的",
        },
      ],
    };
  },
  methods: {
    handleClick(index) {
      //保存点击的下标
      this.currentIndex = index;
    },
  },
  components: {},
};
</script>

<style lang="css" scoped>
.footer {
  margin: 5px 10px 0;
  /* background-color: rgb(255, 0, 238); */
  height: 45px;
  border-top: 3px solid gray;
}
.footer ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.footer ul li {
  list-style: none;
  font-size: 14px;
  color: gray;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer ul li.active {
  color: rgb(11, 113, 230);
  font-weight: 700;
}
</style>